<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增商品</title>
		<style>
			table {
				width: 85%;
				border-collapse: collapse;
				/* 合并边框 */
				margin: 20px 0;
				/* 外边距 */
			}
		
			th,
			td {
				border: 1px solid #ddd;
				/* 单元格边框 */
				text-align: left;
				/* 文本左对齐 */
				padding: 8px;
				/* 内边距 */
			}
		
			th {
				background-color: #f2f2f2;
				/* 表头背景色 */
				font-weight: bold;
				/* 字体加粗 */
			}
		
			tr:nth-child(even) {
				background-color: #f9f9f9;
			}
		
			/* 偶数行背景色 */
		
			tr:hover {
				background-color: #f1f1f1;
			}
		
			/* 鼠标悬停行背景色 */
		
			fieldset {
				border: 1px solid #ddd;
				/* 字段集边框 */
				padding: 20px;
				/* 内边距 */
				margin: 20px 0;
				/* 外边距 */
			}
		
			legend {
				padding: 0 10px;
				/* 内边距 */
				font-weight: bold;
				/* 字体加粗 */
			}
		
			input[type="text"],
			select {
				padding: 5px;
				/* 内边距 */
				margin: 5px 0;
				/* 外边距 */
				border: 1px solid #ddd;
				/* 边框 */
				border-radius: 4px;
				/* 圆角边框 */
			}
		
			input[type="button"] {
				padding: 5px 15px;
				/* 内边距 */
				margin: 5px 0;
				/* 外边距 */
				border: none;
				/* 无边框 */
				background-color: #007bff;
				/* 按钮背景色 */
				color: white;
				/* 文字颜色 */
				border-radius: 4px;
				/* 圆角边框 */
				cursor: pointer;
				/* 鼠标悬停时显示指针 */
			}
		
			input[type="button"]:hover {
				background-color: #0056b3;
				/* 鼠标悬停时按钮背景色 */
			}
		
			a {
				color: #007bff;
				/* 链接文字颜色 */
				text-decoration: none;
				/* 去除下划线 */
				font-weight: bold;
				/* 字体加粗 */
				transition: color 0.3s;
				/* 颜色变化过渡效果 */
			}
		
			a:hover {
				color: #0056b3;
				/* 鼠标悬停时链接文字颜色 */
				text-decoration: underline;
				/* 鼠标悬停时添加下划线 */
			}
		</style>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				//获取get请求参数
				const params = getUrlParams();

				// 发送异步请求找到pno对应的数据
				fetch("http://localhost:8080/category/search?id=" + params.id)
					.then((response) => response.json()) //将响应体中的JSON数据解析为JS对象
					.then((data) => {
						//向页面填充初始值
						document.getElementById("categoryname").value = data.data.categoryName;
						document.getElementById("id").value = data.data.id;
					})
					.catch((e) => console.log('error', e));
			}
			//点击修改执行
			function update() {
				//获取用户输入的值
				const name = document.getElementById("categoryname").value;
				const id = document.getElementById("id").value;
				const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token
				//构造请求参数
				const event = {
					categoryName: name,
					id: id
				};
				//发送异步请求
				fetch("http://localhost:8080/category/update", {
						method: 'PUT',
						headers: {
							'Content-Type': 'application/json', // 设置请求头的Content-Type
							'Authorization': token, // 在请求头中包含token
							
						},
						body: JSON.stringify(event) // 将对象转换为JSON字符串
					})
					.then((response) => response.json()) //将响应体中的JSON数据解析为JS对象
					.then((data) => {
						// 修改成功后跳转到list.html页面
						if (data.code === 1) {
							window.location.href = "../events/enventCategory.html";
						} else {
							alert(data.message);
						}


					})
					.catch((e) => console.log('error', e))
			}
		</script>
	</head>

	<body>
		<fieldset>
			<legend>修改商品</legend>
			事件类型名称:<input type="text" value="" id="categoryname" /><br />
			<input type="hidden" value="" id="id" />
			<input type="button" value="修改商品" onclick="update()" />
		</fieldset>
	</body>
</html>